import { connect } from 'react-redux';
import React, { Component } from 'react';
import { Table, Row, Col } from 'antd';
import CodeLabel from '../../../../components/CodeLabel';
import moment from 'moment';
import './result.less';

function mapStateToProps(state) {
  return {
    hit_handle: state.code.hit_handle,
  };
}

@connect(mapStateToProps)
class HitResult extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
    };
  }

  componentDidMount() {}

  variable = (text, record, index, type, var_type) => {
    let variables = null;
    //如果变量是策略
    if (record[var_type] === 'strategy') {
      variables = this.props.variables.find((it) => it.code === `$${text}risk_level`);
    } else if (record[var_type] === 'third_namelist') {
      variables = this.props.variables.find((it) => it.code === `$third_namelist:${text}`);
    } else if (record[var_type] === 'model') {
      variables = this.props.variables.find((it) => it.code === `$model:${text}`);
      // 如果是这几个里面的一种，则默认用text
    } else if (['risk_level', 'hit_handle', 'literal', 'local_namelist'].includes(record[var_type])) {
      variables = { value: text };
    } else {
      variables = this.props.variables.find((it) => it.code === text);
    }
    let value = '';
    const isRightNameList =
      var_type === 'right_var_type' && (record[var_type] === 'third_namelist' || record[var_type] === 'local_namelist');
    if (variables) {
      if (variables.data_type === 'date') {
        value = (variables.value && moment(Number(variables.value)).format('YYYY-MM-DD HH:mm:ss')) || '';
      } else {
        value = String(variables.value);
      }
    }
    return (
      <div style={{ display: 'flex' }}>
        <div
          style={{
            width: '30px',
            height: '24px',
            border: '#aaa 1px dashed  ',
            borderRight: 0,
            margin: '10px 4px 0 0',
          }}
        />
        <div style={{ flex: 1 }}>
          <div>{record[type] || text}</div>
          {!isRightNameList ? record.hit_result && value : record[type] || text}
        </div>
      </div>
    );
  };

  renderHitDetail = () => {
    const ruleColumns = {
      custom: [
        {
          title: '序号',
          key: 'strategy_id',
          dataIndex: 'strategy_id',
          render: (text, record, index) => `${index + 1}`,
        },
        {
          title: '规则ID',
          key: 'rule_id',
          dataIndex: 'rule_id',
        },
        {
          title: '规则名称',
          key: 'rule_name',
          dataIndex: 'rule_name',
        },
        {
          title: '左变量',
          key: 'left_var_code',
          dataIndex: 'left_var_code',
          render: (text, record, index) => this.variable(text, record, index, 'left_var_name', 'left_var_type'),
        },
        {
          title: '操作符',
          key: 'symbol',
          dataIndex: 'symbol',
          render: (text, record, index) => text,
        },
        {
          title: '右变量',
          key: 'right_var_code',
          dataIndex: 'right_var_code',
          render: (text, record, index) => this.variable(text, record, index, 'right_var_name', 'right_var_type'),
        },
        {
          title: '执行结果',
          key: 'hit',
          dataIndex: 'hit',
          render: (text, record, index) => (record.hit ? '命中' : '未命中'),
        },
      ],
      riskRatio: [
        {
          title: '序号',
          key: 'strategy_id',
          dataIndex: 'strategy_id',
          render: (text, record, index) => `${index + 1}`,
        },
        {
          title: '规则ID',
          key: 'rule_id',
          dataIndex: 'rule_id',
        },
        {
          title: '规则名称',
          key: 'rule_name',
          dataIndex: 'rule_name',
        },
        {
          title: '左变量',
          key: 'left_var_code',
          dataIndex: 'left_var_code',
          render: (text, record, index) => this.variable(text, record, index, 'left_var_name', 'left_var_type'),
        },
        {
          title: '操作符',
          key: 'symbol',
          dataIndex: 'symbol',
          render: (text, record, index) => text,
        },
        {
          title: '右变量',
          key: 'right_var_code',
          dataIndex: 'right_var_code',
          render: (text, record, index) => this.variable(text, record, index, 'right_var_name', 'right_var_type'),
        },
        {
          title: '执行结果',
          key: 'hit',
          dataIndex: 'hit',
          render: (text, record, index) => (record.hit ? '命中' : '未命中'),
        },
        {
          title: '权重值',
          key: 'hit_handle',
          dataIndex: 'hit_handle',
        },
      ],
      firstHit: [
        {
          title: '序号',
          key: 'strategy_id',
          dataIndex: 'strategy_id',
          render: (text, record, index) => `${index + 1}`,
        },
        {
          title: '规则ID',
          key: 'rule_id',
          dataIndex: 'rule_id',
        },
        {
          title: '规则名称',
          key: 'rule_name',
          dataIndex: 'rule_name',
        },
        {
          title: '左变量',
          key: 'left_var_code',
          dataIndex: 'left_var_code',
          render: (text, record, index) => this.variable(text, record, index, 'left_var_name', 'left_var_type'),
        },
        {
          title: '操作符',
          key: 'symbol',
          dataIndex: 'symbol',
          render: (text, record, index) => text,
        },
        {
          title: '右变量',
          key: 'right_var_code',
          dataIndex: 'right_var_code',
          render: (text, record, index) => this.variable(text, record, index, 'right_var_name', 'right_var_type'),
        },
        {
          title: '执行结果',
          key: 'hit',
          dataIndex: 'hit',
          render: (text, record, index) => (record.hit ? '命中' : '未命中'),
        },
        {
          title: '命中处置',
          key: 'hit_handle',
          dataIndex: 'hit_handle',
          render: (text, record, index) => {
            // this.props.hit_handle.filter(item => item.key === this.props.record.hit_result)[0] &&
            // this.props.hit_handle.filter(item => item.key === this.props.record.hit_result)[0].value
            const item = this.props.hit_handle.find((x) => x.key === record.hit_handle);
            return item && item.value;
          },
        },
      ],
      grade: [
        {
          title: '序号',
          key: 'strategy_id',
          dataIndex: 'strategy_id',
          render: (text, record, index) => `${index + 1}`,
        },
        {
          title: '变量名',
          key: 'left_var_code',
          dataIndex: 'left_var_code',
          render: (text, record, index) => this.variable(text, record, index, 'left_var_name', 'left_var_type'),
        },
        {
          title: '变量类型',
          key: 'left_var_type',
          dataIndex: 'left_var_type',
        },
        {
          title: '命中',
          key: 'cases',
          dataIndex: 'cases',
        },
        {
          title: '得分',
          key: 'hit_result',
          dataIndex: 'hit_result',
          render: (text, record) => <span style={{ color: '#f74c21' }}>{text}</span>,
        },
      ],
      harshestFirst: [
        {
          title: '序号',
          key: 'strategy_id',
          dataIndex: 'strategy_id',
          render: (text, record, index) => `${index + 1}`,
        },
        {
          title: '规则ID',
          key: 'rule_id',
          dataIndex: 'rule_id',
        },
        {
          title: '规则名称',
          key: 'rule_name',
          dataIndex: 'rule_name',
        },
        {
          title: '左变量',
          key: 'left_var_code',
          dataIndex: 'left_var_code',
          render: (text, record, index) => this.variable(text, record, index, 'left_var_name', 'left_var_type'),
        },
        {
          title: '操作符',
          key: 'symbol',
          dataIndex: 'symbol',
          render: (text, record, index) => text,
        },
        {
          title: '右变量',
          key: 'right_var_code',
          dataIndex: 'right_var_code',
          render: (text, record, index) => this.variable(text, record, index, 'right_var_name', 'right_var_type'),
        },
        {
          title: '执行结果',
          key: 'hit',
          dataIndex: 'hit',
          render: (text, record, index) => (record.hit ? '命中' : '未命中'),
        },
        {
          title: '命中处置',
          key: 'hit_handle',
          dataIndex: 'hit_handle',
          render: (text, record, index) => {
            // this.props.hit_handle.filter(item => item.key === this.props.record.hit_result)[0] &&
            // this.props.hit_handle.filter(item => item.key === this.props.record.hit_result)[0].value
            const item = this.props.hit_handle.find((x) => x.key === record.hit_handle);
            return item && item.value;
          },
        },
      ],
    };

    return (
      <>
        <Row className='desr-wp'>
          <Col span={12}>
            {this.props.title || '策略模式'}：{this.props.record.strategy_mode_name}
          </Col>
          {this.props.hit_handle && this.props.hit_handle ? (
            <Col span={12}>
              执行结果：
              <CodeLabel code='hit_handle' value={this.props.record.hit_result} />
            </Col>
          ) : (
            ''
          )}
          {(() => {
            switch (this.props.record.strategy_mode) {
              case 1:
                // 风险权重
                return (
                  <>
                    <Col span={12}>命中处置：{this.props.record.hit_handle}</Col>
                    <Col span={12}>{this.props.record.hit_result_comment}</Col>
                  </>
                );
              case 2:
                // 首次命中
                return (
                  <Col>
                    命中规则：<span style={{ color: '#f74c21' }}>{this.props.record.hit_result_comment}</span>
                  </Col>
                );
              case 3:
                // 最严规则优先
                return (
                  <Col>
                    命中规则：<span style={{ color: '#f74c21' }}>{this.props.record.hit_result_comment}</span>
                  </Col>
                );
              case 4:
                // 自定义规则
                return (
                  <Col style={{ clear: 'both', paddingBottom: '10px' }}>
                    <div style={{ display: 'flex' }}>
                      {this.props.record.hit_result_comment ? (
                        <>
                          <div>
                            条件表达式 (
                            <span style={{ color: '#f74c21' }}>
                              {this.props.record.hit_result_comment.split('=')[2]}
                            </span>
                            ):
                          </div>
                          <div style={{ flex: 1 }}>
                            {this.props.record.hit_result_comment.split('=')[0]}
                            <span style={{ color: '#f74c21', lineHeight: '14px', marginLeft: '' }}>
                              {this.props.record.hit_result_comment.split('=')[1]}
                            </span>
                          </div>
                        </>
                      ) : (
                        <div>条件表达式 :{this.props.record.hit_handle}</div>
                      )}
                    </div>
                  </Col>
                );
              case 5:
                // 评分卡
                return (
                  <>
                    <Col span={12}>{this.props.record.hit_handle}</Col>
                    <Col span={12}>
                      规则总得分：<span style={{ color: '#f74c21' }}>{this.props.record.hit_result_comment}</span>
                    </Col>
                  </>
                );
              default:
                return '';
            }
          })()}
        </Row>
        <Table
          dataSource={this.props.record.rules}
          rowKey='rule_id'
          columns={
            ruleColumns[
              (() => {
                switch (this.props.record.strategy_mode) {
                  case 1:
                    return 'riskRatio';
                  case 2:
                    return 'firstHit';
                  case 3:
                    return 'harshestFirst';
                  case 4:
                    return 'custom';
                  case 5:
                    return 'grade';
                  default:
                    return 'riskRatio';
                }
              })()
            ]
          }
          pagination={false}
        />
      </>
    );
  };

  render() {
    return <>{this.renderHitDetail()}</>;
  }
}

export default HitResult;
